<!--
 配件渠道
 -->
<template>
<div style="padding: 2% 3%;">
   <h2>销售部客户关系</h2>
  <el-row>
    <el-button-group>
      <el-button type="info"  :size='size' @click="refresh">刷新</el-button>
      <el-button :type="typeButton"  :size='size' @click="save">保存</el-button>
    </el-button-group>
  </el-row>
  <!-- 新增 -->
  <el-row  >
     <el-divider></el-divider>

    <el-form ref="form1" :inline="true" :rules="rules" :model="form" label-width="120px" >
      <el-row>
        <el-col :span="3.5">
         <el-form-item label="客户转介绍线索">
             <el-input-number @change="change" :size="size" :controls="false" style="width:200px;" controls-position="right"  :min="0" v-model="form.kehuzhuanjieshaoxiansuo ">
             </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item @change="change" label="客户转介绍交付量" label-width="150px">
             <el-input-number :size="size" :controls="false"  style="width:200px;" controls-position="right"  :min="0" v-model="form.kehuzhuanjieshaojiaofuliang">
             </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item label="客诉数量">
             <el-input-number @change="change" :size="size" :controls="false" style="width:200px;" controls-position="right"  :min="0" v-model="form.kesushuliang">
             </el-input-number>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="3.5">
          <el-form-item label="客诉级别" prop="kesujibie" >
           <el-select @change="change" :size="size" v-model="form.kesujibie" placeholder="请选择" style="width:200px;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item label="客诉类别" label-width="150px" prop="kesuleibie" >
           <el-select @change="change" :size="size" v-model="form.kesuleibie" placeholder="请选择" style="width:200px;"  >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item  label="客诉处理状况" prop="kesuchulizhuangkuang " >
           <el-select @change="change" :size="size" v-model="form.kesuchulizhuangkuang" placeholder="请选择" style="width:200px;"  >
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="3.5">
          <el-form-item label="结案数量">
             <el-input-number @change="change" :size="size" :controls="false" style="width:200px;" controls-position="right"  :min="0" v-model="form.jieanshuliang">
             </el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider></el-divider>
  </el-row>
</div>
</template>

<script>
  export default{
    data() {
      return {
       size:'small',
       typeButton:'info',
       form:{
         kehuzhuanjieshaoxiansuo:null,         //客户转介绍线索
         kehuzhuanjieshaojiaofuliang:null,     //客户转介绍交付量
         kesushuliang:null,                    //客诉数量
         kesujibie:'',                      //客诉级别
         kesuleibie:'',                     //客诉类别
         kesuchulizhuangkuang:'',           //客诉处理状况
         jieanshuliang:null,                   //结案数量
       },
       rules:{
/*         name:[{ required: true, message: '请选择配件渠道', trigger: 'blur' }],
         category:[{ required: true, message: '请输入配件类型', trigger: 'blur' }], */
       },
       options:[
          {
            value: '一般',
            label: '一般'
          }, {
            value: '重大',
            label: '重大',
          }
       ],
       options2:[
          {
            value: '服务',
            label: '服务'
          },{
            value: '产品质量',
            label: '产品质量',
          },{
            value: '价格',
            label: '价格',
          }, {
            value: '失效',
            label: '失效',
          }, {
            value: '欺瞒',
            label: '欺瞒',
          }, {
            value: '强配',
            label: '强配',
          }
       ],
       options3:[
          {
            value: '结案',
            label: '结案'
          }, {
            value: '未结案',
            label: '未结案',
          }
       ],
      }
    },

    methods: {
      change(){
        this.typeButton = 'success'
      },
       save(){
         this.$ajax.post("ClientRelations/save", this.form).then(res => {
           var result = res.data;
             if (result.success) {
               this.$notify({
                 title: '提示',
                 message: '数据保存成功',
                 type: 'success',
                 position: 'bottom-right'
               });
               this.refresh()
               this.typeButton = 'info'
             }
         })
       },
       refresh(){
         this.$ajax.post("ClientRelations/findbydate", {}).then(res => {
           var result = res.data
           this.form = result.data
          this.typeButton = 'info'

         })
       },
    },
    created() {
      this.refresh()
    }
    }

</script>

<style>
</style>
